<template>
	<view class="">
		<view class="nav">
			商品分类
		</view>
		<view class="box">
			<view class="boxL">
				<view class="leftBac">
					<view :class="checkType==0?'leftBox2':'leftBox1'" @click="clickSrc">
						搜索
					</view>
					<view :class="checkType==item.id?'leftBox2':'leftBox1'" v-for="(item,index) in category"
						:key='index' @click="check(item.id)">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="boxR">
				<view class="inputs" v-show="wordShow">
					<u-search shape="round" placeholder="请输入商品" :showAction='false' v-model="keyword"
						@search="getGoodsList"></u-search>
				</view>
				<scroll-view class="scolBox" scroll-y="true">
					<view class="rightList" v-for="(item,index) in goodList" :key="index" @click="toDetails(item.id)">
						<view class="listBox">
							<view class="listImg">
								<image :src="item.picUrl"></image>
							</view>
							<view class="listCont">
								<view class="contTitle">
									{{item.name}}
								</view>
								<view class="contIntro">
									{{item.context}}
								</view>
								<view class="listPrice">
									<view class="price" v-if="item.specsList[0].levelPrice">
										￥{{(item.specsList[0].levelPrice/100).toFixed(2)}}
										<image class="vipIcon" src="../../static/images/index/vip.png"></image>
									</view>
									<view class="price" v-else>
										￥{{(item.specsList[0].price/100).toFixed(2)}}
									</view>
									<view class="number" @click.stop>
										<view slot="plus" class="plus2">
											<u-icon name="plus" color="#FFFFFF" size="15"
												@click="chekcSkuEmit(item.specsList)"></u-icon>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="icons" @click="trigger" v-if="containsValueInArray([1])">
			<image src="@/static/images/icon/shop.png" mode=""></image>
		</view>
		<u-popup :show="show" @close="close" @open="open" :round="10" :closeable="true" :safeAreaInsetTop="true"
			:safeAreaInsetBottom="false">
			<view class="pupBox">
				<view class="goodsInfo">
					<image class="pupImg" :src="checkedSku.picUrl"></image>
					<view class="pupRighr">
						<view class="goodPrice2">
							<text style="font-size: 20rpx;">￥</text>{{(checkedSku.price/100).toFixed(2)}}
						</view>
						<view class="stand">

						</view>
						<view class="stock">
							库存：{{checkedSku.stock || 0}}
						</view>
						<view class="check">
							已选：{{checkedSku.name}}
						</view>
					</view>
				</view>
				<view class="pupTitle">
					规格
				</view>
				<view class="specifi">
					<view v-for="(item,index) in checkSkus" :key="index">
						<view :class="checkedSku.id==item.id?'specLi':'specLi2'" @click="skuEmit(item)"
							v-if="item.stock">
							{{item.name}}
						</view>
						<view class="specLi3" v-else>
							{{item.name}}
							<view class="stickIcon">
								缺货
							</view>
						</view>
					</view>
				</view>
				<view class="pupTitle">
					<view class="number2">
						数量
					</view>
					<view class="numberInput">
						<u-number-box min="1" :max="checkedSku.stock" v-model="value">
							<view slot="minus" class="minus">
								<u-icon name="minus" size="12"></u-icon>
							</view>
							<input slot="input" style="width: 150rpx;text-align: center;" class="input" v-model="value"
								@change="numberChange" />
							<view slot="plus" class="plus">
								<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
							</view>
						</u-number-box>
					</view>
				</view>
				<view class="boot2">
					<view class="bootLeft2" @click="joinCat">
						<view class="bootBut">
							<image class="butIcon" src="../../static/images/dealis/shoop.png"></image>
							<view class="bootTxt">
								加入购物车
							</view>
						</view>
					</view>
					<view class="bootReight2">
						<view class="bootBut">
							<image class="butIcon" src="../../static/images/dealis/add.png"></image>
							<view class="bootTxt" @click="joinCat(1)">
								去结算
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		categoryList,
		getGoodsList,
		addGoodsInCat
	} from "@/api/wine/wine.js"
	export default {
		data() {
			return {
				category: [], //分类数据
				goodList: [], //商品数据
				checkType: 0, //选择的分类
				value: 1, //数量
				keyword: '', //搜索框
				wordShow: true, //是否显示输入框
				show: false, //展示弹出
				checkSkus: [], //选择的sku列表
				checkedSku: {}, //选中的sku
				customerId: '', //商户id
			}
		},
		onShow() {
			this.getCategory()
			this.getGoodsList()
			//获取用户信息确保用户登录
			// getUserInfo() {
			this.$store.dispatch('GetInfo').then(res => {
				// console.log('111')
			})
			// },
		},
		// onLoad(query) {
			
		// },
		methods: {
			//数量判断事件
			numberChange() {
				// console.log('444')
				if (!isNaN(this.value)) {
					// 如果是数字，直接取整（舍去小数部分）
					this.value = Math.floor(this.value);
				}
				if (this.value < 1) {
					this.value = 1
				} else if (this.value > this.checkedSku.stock) {
					uni.showToast({
						title: '不能超过最大库存',
						icon: 'none'
					})
					this.value = this.checkedSku.stock
				}
			},
			//判断是否含有指定身份的函数
			containsValueInArray(value) {
				let array = this.$store.getters.tagIds
				let ret = false
				value.forEach(item => {
					if (array.includes(item)) {
						ret = true
					}
				});
				return ret;
			},
			//添加进购物车
			joinCat(e) {
				let that = this
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				// if (!uni.getStorageSync('deskNum')) {
				// 	uni.$u.toast('请扫码后点餐')
				// 	// console.log('openid',uni.getStorageSync('openid'))
				// 	return false
				// }
				if (!that.checkedSku.stock) {
					uni.showToast({
						title: '当前选择库存为0',
						icon: 'none'
					})
					return false
				}
				if (!that.checkedSku.id) {
					uni.$u.toast('请选择规格')
					// console.log('openid',uni.getStorageSync('openid'))
					return false
				}
				let data = {
					specsId: that.checkedSku.id,
					count: that.value,
					// customerId: that.customerId,
					type: 2
				}
				console.log('参数', data)
				addGoodsInCat(data).then(response => {
					uni.hideLoading()
					if (response.code == 0) {
						uni.$u.toast('添加成功')
						that.value = 1
						that.show = false
						that.checkedSku = {}
						uni.showTabBar()
						if (e == 1) {
							that.trigger()
						}
					}
				})
			},
			//规格点击事件
			skuEmit(e) {
				this.checkedSku = e
				this.value = 1
			},
			chekcSkuEmit(e) {
				if(this.containsValueInArray([1])){
					this.checkSkus = e
					this.checkedSku = this.checkSkus[0]
					this.show = true
				}else{
					uni.$u.toast('请成为商户后下单')
				}
			},
			//弹窗事件
			open() {
				// console.log('open');
				uni.hideTabBar()
			},
			close() {
				this.show = false
				this.checkSku = []
				this.checkedSku = {}
				this.value = 1
				// console.log('close');
				uni.showTabBar()
			},
			//点击搜索
			clickSrc() {
				this.wordShow = true
				this.checkType = 0
				this.getGoodsList()
			},
			//选择分类
			check(e) {
				this.checkType = e
				this.wordShow = false
				this.keyword = ''
				this.getGoodsList()
			},
			trigger() {
				this.$tab.navigateTo('/pages/shopCart/shopCart?type=' + true)
			},
			//跳转详情
			toDetails(e) {
				this.$tab.navigateTo('/pages/details/details?id=' + e + '&type=' + 2)
			},
			//获得商品fenl
			getCategory() {
				let that = this
				categoryList().then(response => {
					if (response.code == 0) {
						that.category = response.data
					}
				})
			},
			//获得商品列表
			getGoodsList() {
				let that = this
				uni.showLoading({
					title: '加载中'
				})
				let catid = ''
				if (that.checkType) {
					catid = that.checkType
				}
				let data = {
					name: that.keyword,
					categoryId: catid,
					merchantId: that.customerId
				}
				getGoodsList(data).then(response => {
					uni.hideLoading()
					if (response.code == 0) {
						that.goodList = response.data
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.nav {
		width: 100%;
		height: 180rpx;
		line-height: 260rpx;
		text-align: center;
		font-size: 35rpx;
		position: fixed;
		top: 0;
		background-color: white;
		border-bottom: 1px solid #666;
	}

	.box {
		width: 750rpx;
		min-height: 87.5vh;
		margin-top: 180rpx;
		display: flex;
	}

	.boxL {
		width: 176rpx;
		min-height: 87.5vh;
	}

	.leftBac {
		width: 176rpx;
		background-color: white;
	}

	.boxR {
		width: 574rpx;
		padding: 0 30rpx;
		min-height: 87.5vh;
		background-color: white;
	}

	.inputs {
		width: 520rpx;
		height: 60rpx;
		margin: 30rpx 30rpx 30rpx 0rpx;
	}

	.leftBox1 {
		width: 176rpx;
		height: 120rpx;
		font-size: 30rpx;
		padding: 0 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgb(241, 241, 241);
	}

	.leftBox {
		width: 176rpx;
		height: 120rpx;
		font-size: 30rpx;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgb(241, 241, 241);
	}

	.leftBox2 {
		width: 176rpx;
		height: 120rpx;
		padding: 0 20rpx;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: white;
	}

	.rightList {
		width: 514rpx;
		height: 200rpx;
		border-radius: 20rpx;
		margin-top: 30rpx;
		box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(133, 32, 32, 0.16);
		overflow: hidden;
	}

	.listBox {
		width: 454rpx;
		height: 156rpx;
		margin: 22rpx auto;
		display: flex;
		justify-content: space-between;
	}

	.listImg {
		width: 156rpx;
		height: 156rpx;
		overflow: hidden;
		border-radius: 20rpx;
	}

	.listImg image {
		width: 100%;
		height: 100%;
	}

	.listCont {
		width: 268rpx;
		height: 156rpx;
	}

	.contTitle {
		width: 268rpx;
		height: 40rpx;
		font-size: 28rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.contIntro {
		width: 268rpx;
		height: 68rpx;
		line-height: 34rpx;
		font-size: 24rpx;
		color: #999999;
		display: -webkit-box;
		/* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/
		-webkit-box-orient: vertical;
		/* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
		text-overflow: ellipsis;
		/* 可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。*/
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.listPrice {
		width: 268rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.price {
		width: 170rpx;
		height: 48rpx;
		line-height: 48rpx;
		font-size: 36rpx;
		color: #E84E22;
		display: flex;
		align-items: center;
	}

	.number {
		max-width: 94rpx;
		height: 30rpx;
	}

	// 数量
	.minus {
		width: 28rpx;
		height: 28rpx;
		border-width: 1px;
		border-color: #E6E6E6;
		border-style: solid;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 10px;
	}

	.plus {
		width: 28rpx;
		height: 28rpx;
		background-color: #FF0000;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}

	.plus2 {
		width: 35rpx;
		height: 35rpx;
		background-color: #FF0000;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}

	// 悬浮图标
	.icons {
		width: 76rpx;
		height: 76rpx;
		border-radius: 50%;
		overflow: hidden;
		position: fixed;
		bottom: 50rpx;
		left: 50rpx;
	}

	.icons image {
		width: 100%;
		height: 100%;
	}

	/* 弹出层 */
	.pupBox {
		width: 750rpx;
		/* height: 700rpx; */
	}

	.goodsInfo {
		width: 690rpx;
		height: 200rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
	}

	.pupImg {
		width: 200rpx;
		height: 200rpx;
	}

	.pupRighr {
		width: 450rpx;
		height: 200rpx;
	}

	.goodPrice2 {
		width: 450rpx;
		height: 50rpx;
		font-weight: bold;
		font-size: 36rpx;
		color: #E84E22;
		margin: 0 auto;
	}

	.stand {
		width: 450rpx;
		height: 60rpx;
	}

	.stock {
		width: 450rpx;
		height: 30rpx;
		line-height: 30rpx;
		font-size: 20rpx;
		color: #F16645;
	}

	.check {
		width: 450rpx;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 28rpx;
		color: #333333;
	}

	.pupTitle {
		width: 690rpx;
		height: 40rpx;
		line-height: 40rpx;
		margin: 60rpx auto 30rpx auto;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		display: flex;
		justify-content: space-between;
	}

	.specifi {
		width: 690rpx;
		margin: 0 auto;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.specLi {
		// width: 200rpx;
		padding: 0 25rpx;
		height: 60rpx;
		margin: 30rpx 15rpx 0 15rpx;
		line-height: 60rpx;
		text-align: center;
		background: #F1F1F1;
		border-radius: 28rpx;
		border: 1rpx solid #E84E22;
	}

	.specLi2 {
		// width: 200rpx;
		padding: 0 25rpx;
		height: 60rpx;
		margin: 30rpx 15rpx 0 15rpx;
		line-height: 60rpx;
		text-align: center;
		background: #F1F1F1;
		border-radius: 28rpx;
	}

	.specLi3 {
		// width: 200rpx;
		padding: 0 25rpx;
		height: 60rpx;
		margin: 30rpx 15rpx 0 15rpx;
		line-height: 60rpx;
		text-align: center;
		background: #F1F1F1;
		border-radius: 28rpx;
		color: #666;
		position: relative;
		overflow: hidden;
	}

	.stickIcon {
		position: absolute;
		width: 80rpx;
		height: 30rpx;
		line-height: 30rpx;
		font-size: 15rpx;
		text-align: center;
		top: 0;
		right: 0;
		background-color: rgba(255, 141, 2, 0.8);
		color: white;
		border-bottom-left-radius: 28rpx;
	}

	.number2 {
		// width: 550rpx;
		height: 40rpx;
		line-height: 40rpx;
	}

	.numberInput {
		min-width: 100rpx;
		height: 40rpx;
	}
	

	// 数量
	.minus {
		width: 28rpx;
		height: 28rpx;
		border-width: 1px;
		border-color: #E6E6E6;
		border-style: solid;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 10px;
	}

	// .plus {
	// 	width: 28rpx;
	// 	height: 28rpx;
	// 	background-color: #FF0000;
	// 	border-radius: 50%;
	// 	/* #ifndef APP-NVUE */
	// 	display: flex;
	// 	/* #endif */
	// 	justify-content: center;
	// 	align-items: center;
	// }

	.boot2 {
		width: 690rpx;
		height: 150rpx;
		background-color: white;
		margin: 0 auto;
		display: flex;
		justify-content: center;
	}

	.bootLeft2 {
		width: 300rpx;
		height: 80rpx;
		background: #EA823D;
		border-top-left-radius: 40rpx;
		border-bottom-left-radius: 40rpx;
	}

	.bootReight2 {
		width: 300rpx;
		height: 80rpx;
		background: #E84E22;
		border-top-right-radius: 40rpx;
		border-bottom-right-radius: 40rpx;
	}

	.bootBut {
		width: 195rpx;
		height: 80rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin: 0 auto;
	}

	.butIcon {
		width: 30rpx;
		height: 30rpx;
	}

	.bootTxt {
		width: 140rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 25rpx;
		color: #FFFFFF;
	}

	.scolBox {
		width: 100%;
		height: 80vh;
	}
	.vipIcon{
		width: 30rpx;
		height: 30rpx;
		margin-left: 10rpx;
	}
</style>